<!-- directive:title 特效闪光字 -->
<!-- directive:breadcrumb 特效闪光字 -->
<div class='panel-body'>
    <div class=' neonbox'>
        <div class="neon">
            <span class="text" data-text="任礼游平台">任礼游平台</span>
            <span class="gradient"></span>
            <span class="spotlight"></span>
        </div>
    </div>
    <style media="screen" ui-bs>
        .neonbox { margin: 0; height: 400px; display: flex; align-items: center; justify-content: center; background-color: black; }
        .neonbox .neon { position: relative; overflow: hidden; filter: brightness(200%); }
        .neonbox .neon .text { background-color: black; color: white; font-size: 180px; font-weight: bold; font-family: sans-serif; text-transform: uppercase; position: relative; user-select: none; display: block; }
        .neonbox .neon .text::before { content: attr(data-text); position: absolute; color: white; filter: blur(0.02em); mix-blend-mode: difference; }
        .neonbox .neon .gradient { position: absolute; background: linear-gradient(45deg, red, gold, lightgreen, gold, red); top: 0; left: 0; right: 0; bottom: 0; mix-blend-mode: multiply; }
        .neonbox .neon .spotlight { position: absolute; top: -100%; left: -100%; right: 0; bottom: 0; background: radial-gradient( circle, white, transparent 25% ) center / 25% 25%, radial-gradient( circle, white, black 25% ) center / 12.5% 12.5%; animation: light 5s linear infinite; mix-blend-mode: color-dodge; }
        @keyframes light { to { transform: translate(50%, 50%); } }
    </style>
</div>
